<!-- 脱敏字段管理 -->
<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form class="yd-form-wraper" :options="formOptions" :model="searchFormData">
			<template #form-btn>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="searchHandler">查 询</el-button>
				</el-form-item>
			</template>
		</yd-form>

		<!-- 数据列表 -->
		<YdTable
			:formData="searchFormData"
			:tableConfig="tableConfig"
			:tableData="tableData.data"
			@sizeChangeHandler="searchHandler"
			@currentChangeHandler="handleQuery"
			@sortChangeHandler="handleQuery"
			@selectionChangeHandler="handlerSelectionChange"
		>
		</YdTable>

		<!-- 添加或修改参数配置对话框 -->
		<el-dialog :title="dialog.addOrUpdate.title" v-model="dialog.addOrUpdate.open" width="600px" append-to-body center>
			<el-form ref="addOrUpdateForm" :model="dialog.addOrUpdate.form" :rules="dialog.addOrUpdate.rule" label-width="120px">
				<el-form-item label="脱敏字段" prop="name">
					<el-input v-model="dialog.addOrUpdate.form.name" placeholder="请输入脱敏字段名称"></el-input>
				</el-form-item>
				<el-form-item label="字段编码" prop="code">
					<el-input v-model="dialog.addOrUpdate.form.code" disabled></el-input>
				</el-form-item>
				<el-form-item label="开始位置" prop="startIndex">
					<el-input-number v-model="dialog.addOrUpdate.form.startIndex" :precision="0" :min="0" :max="99999"> </el-input-number>
				</el-form-item>
				<el-form-item label="脱敏长度" prop="length">
					<el-input-number v-model="dialog.addOrUpdate.form.length" :precision="0" :min="0" :max="99999"> </el-input-number>
				</el-form-item>
				<el-form-item label="展示脱敏" prop="showFlag">
					<el-radio-group v-model="dialog.addOrUpdate.form.showFlag">
						<el-radio-button :label="0">否</el-radio-button>
						<el-radio-button :label="1">是</el-radio-button>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="导出脱敏" prop="exportFlag">
					<el-radio-group v-model="dialog.addOrUpdate.form.exportFlag">
						<el-radio-button :label="0">否</el-radio-button>
						<el-radio-button :label="1">是</el-radio-button>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<template #footer class="dialog-footer">
				<el-button type="primary" @click="handlerSubmit" :loading="dialog.addOrUpdate.btnLoading">确 定</el-button>
				<el-button @click="closeAddOrUpdateDialog">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="MaskConfig" lang="tsx">
import { list, edit, downEnable, showEnable, add } from '@/api/management/IndicatorManage/proprietaryIndicatorManage/maskConfig';
import { reactive, ref, onMounted } from 'vue';

import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();

const addOrUpdateForm = ref();

// 搜索表单数据
let searchFormData = reactive<FormModelType>({
	pageSize: 10,
	pageNum: 1,
	orderByColumn: '',
	isAsc: '',
});

// 表单配置
const formOptions = ref<FormOptionType>([
	{
		type: 'input',
		prop: 'name',
		label: '列表脱敏字段',
	},
]);

// 列表配置
let tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '列表脱敏字段',
			prop: 'name',
		},
		{
			label: '脱敏长度',
			prop: 'length',
		},
		{
			label: '导出脱敏',
			prop: 'exportFlag',
			render: (row, val) => {
				if (proxy.checkPermi(['resource:mask:downEnable'])) {
					return (
						<el-switch value={row.exportFlag} active-value={1} inactive-value={0} onChange={(v: any) => downChange(row, v, 'exportFlag')}></el-switch>
					);
				}
				return <el-switch v-model={row.exportFlag} disabled active-value={1} inactive-value={0}></el-switch>;
			},
		},
		{
			label: '展示脱敏',
			prop: 'showFlag',
			render: (row, val) => {
				if (proxy.checkPermi(['resource:mask:showEnable'])) {
					return (
						<el-switch value={row.showFlag} active-value={1} inactive-value={0} onChange={(v: any) => showChange(row, v, 'showFlag')}></el-switch>
					);
				}
				return <el-switch v-model={row.showFlag} disabled active-value={1} inactive-value={0}></el-switch>;
			},
		},
	],
	// 工具栏
	toolBar: [{ name: '修改', icon: 'yd-icon-edit', disable: 'single', permi: ['resource:mask:edit'], handler: () => handlerEdit() }],
	// 开启复选框
	enableSelection: true,
	// 开启分页
	pagination: {
		pageNum: 1,
	},
	// 加载层
	loading: true,
});
// 列表数据
let tableData = reactive({
	data: [],
});
// 选择的行数据ids
const selectedIds = ref();
// 选择的行数据
const selected = ref();
let dialog = reactive<anyObj>({
	addOrUpdate: {
		// 打开状态
		open: false,
		// 标题
		title: '',
		// 表单数据
		form: {},
		// 按钮加载中状态
		btnLoading: false,
		// 表单校验规则
		rule: {
			name: [{ required: true, message: '脱敏字段名称不能为空', trigger: 'blur' }],
			code: [{ required: true, message: '脱敏字段编码不能为空', trigger: 'blur' }],
			startIndex: [{ required: true, message: '脱敏开始位置不能为空', trigger: 'blur' }],
			length: [{ required: true, message: '脱敏长度不能为空', trigger: 'blur' }],
		},
	},
});

onMounted(() => {
	handleQuery();
});
/**
 * 关闭新增或修改弹出层
 */
function closeAddOrUpdateDialog() {
	dialog.addOrUpdate.open = false;
}
/**
 * 选择行数据
 */
function handlerSelectionChange(selects: any) {
	selectedIds.value = selects.map((item: any) => item.id);
	selected.value = selects;
}
function searchHandler() {
	tableConfig.pagination!.pageNum = 1;
	handleQuery();
}

/**
 * 搜索
 */
function handleQuery() {
	tableConfig.loading = true;
	list(searchFormData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		if (res.data !== null) {
			tableData.data = res.data.records;
			tableConfig.pagination!.total = res.data.total;
		}
	});
}
/**
 * 表单提交
 */
function handlerSubmit() {
	if (dialog.addOrUpdate.title === '新增') {
		handlerAdd();
	} else {
		handlerEdit();
	}
}
/**
 * 新增
 */
function handlerAdd() {
	let sign;
	// 判断窗口是否打开
	if (!dialog.addOrUpdate.open) {
		// 表单重置
		if (sign !== 'SET_FORM') {
			dialog.addOrUpdate.form = {};
			// proxy.resetForm('addOrUpdateForm');
			addOrUpdateForm.value?.resetFields();
		}
		// 标题
		dialog.addOrUpdate.title = '新增';
		// 打开窗口
		dialog.addOrUpdate.open = true;
		return;
	}
	// 校验参数
	addOrUpdateForm.value?.validate((valid: any) => {
		if (!valid) {
			return;
		}
		// 调用接口
		dialog.addOrUpdate.btnLoading = true;
		add(dialog.addOrUpdate.form).then((res: ApiResponse) => {
			dialog.addOrUpdate.btnLoading = false;
			if (res.code !== 0) {
				proxy.$modal.msgError(res.msg);
				return;
			}
			// 关闭弹出层
			closeAddOrUpdateDialog();
			// 刷新列表
			searchFormData.pageNum = 1;
			handleQuery();
			// 提示
			proxy.$modal.msgSuccess('新增成功！');
		});
	});
}
/**
 * 修改
 */
function handlerEdit() {
	// 判断窗口是否打开
	if (!dialog.addOrUpdate.open) {
		// 数据回显，数据需要拷贝一下
		const d = JSON.parse(JSON.stringify(selected.value[0]));
		dialog.addOrUpdate.form = d;
		// 标题
		dialog.addOrUpdate.title = '修改';
		// 打开窗口
		dialog.addOrUpdate.open = true;
		return;
	}
	// 校验参数
	addOrUpdateForm.value?.validate((valid: any) => {
		if (!valid) {
			return;
		}
		// 调用接口
		dialog.addOrUpdate.btnDisabled = true;
		edit(dialog.addOrUpdate.form).then((res) => {
			dialog.addOrUpdate.btnDisabled = false;
			if (res.code !== 0) {
				proxy.$modal.msgError(res.msg);
				return;
			}
			// 关闭弹出层
			closeAddOrUpdateDialog();
			// 刷新列表
			searchFormData.pageNum = 1;
			handleQuery();
			// 提示
			proxy.$modal.msgSuccess('修改成功！');
		});
	});
}
// 状态改变
function downChange(row: any, v: any, k: any) {
	row[k] = v;
	const d = JSON.parse(JSON.stringify(row));
	downEnable(d).then((res) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		proxy.$modal.msgSuccess('设置成功');
	});
}
function showChange(row: any, v: any, k: any) {
	row[k] = v;
	const d = JSON.parse(JSON.stringify(row));
	showEnable(d).then((res) => {
		if (res.code !== 0) {
			proxy.$modal.msgWarning(res.msg);
			return;
		}
		proxy.$modal.msgSuccess('设置成功');
	});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
